<template>
  <div class="Box">
    <!--反-->
    <div class="iconbox">
      <div
        @click="selectIcon(1)"
        :class="iconStatus == 1 ? 'icons' : ''"
        class="icon"
      >
        <img
          class="icon-img"
          src="../static/img_feedback_function.png"
          alt=""
        />
        <div class="icon-title">功能</div>
        <div v-if="this.iconStatus == 1" class="icon-mc"></div>
      </div>
      <div
        @click="selectIcon(2)"
        :class="iconStatus == 2 ? 'icons' : ''"
        class="icon"
        c
      >
        <img
          class="icon-img"
          src="../static/img_feedback_accuracy.png"
          alt=""
        />
        <div class="icon-title">课程</div>
        <div v-if="this.iconStatus == 2" class="icon-mc"></div>
      </div>
      <div
        @click="selectIcon(3)"
        :class="iconStatus == 3 ? 'icons' : ''"
        class="icon"
      >
        <img class="icon-img" src="../static/img_feedback_design.png" alt="" />
        <div class="icon-title">设计</div>
        <div v-if="this.iconStatus == 3" class="icon-mc"></div>
      </div>
    </div>
    <div class="iconbox">
      <div
        @click="selectIcon(4)"
        :class="iconStatus == 4 ? 'icons' : ''"
        class="icon"
        v-if="payStatus !== 1 && payStatus !== -1"
      >
        <img
          class="icon-img"
          src="../static/img_feedback_subscription.png"
          alt=""
        />
        <div class="icon-title">订阅</div>
        <div v-if="this.iconStatus == 4" class="icon-mc"></div>
      </div>
      <!-- start -->
      <div
        @click="selectIcon(5)"
        :class="iconStatus == 5 ? 'icons' : ''"
        class="icon"
        v-if="payStatus !== 1 && payStatus !== -1"
      >
        <img class="icon-img" src="../static/img_feedback_refund.png" alt="" />
        <div class="icon-title">退款</div>
        <div v-if="this.iconStatus == 5" class="icon-mc"></div>
      </div>
      <!-- end -->
      <div
        @click="selectIcon(6)"
        :class="iconStatus == 6 ? 'icons' : ''"
        class="icon"
      >
        <img class="icon-img" src="../static/img_feedback_bug.png" alt="" />
        <div class="icon-title">缺陷</div>
        <div v-if="this.iconStatus == 6" class="icon-mc"></div>
      </div>
    </div>

    <div class="fieldBox">
      <div class="email-title">问题描述</div>
      <van-field
        v-model="message"
        @input="inputchange"
        rows="2"
        type="textarea"
        maxlength="300"
        :placeholder="$t('title8')"
        show-word-limit
      />
      <!--图片上传-->
      <div class="pictureBox">
        <div class="imgBox">
          <div class="imgShouw" v-for="(item, index) in fileList" :key="index">
            <img @click="seeimg(index)" :src="item.url" alt="" />
            <img
              @click="deleteimg(index)"
              class="imgBoxImg"
              src="static/ic_feedback_photo_close.png"
              alt=""
            />
          </div>
          <div @click="clickimge" class="imgAdd" v-if="fileList.length !== 3">
            <img src="../static/ic_feedback_photo_add.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <div class="emailBox">
      <div class="email-title">联系方式</div>
      <textarea
        v-model="inputText"
        :placeholder="$t('title11')"
        class="emailInput"
        type="text"
      />
    </div>
    <!-- start -->
    <div class="email-address-box" v-if="showEmailContact && payStatus !== -1">
      <div class="email-address-tips">
        需要帮助？我们随时倾听您的反馈！请邮件至：
      </div>
      <div class="email-address-nums">
        Huluhealth@outlook.com
      </div>
      <div class="copy-btn" @click="copyEmail"></div>
    </div>
    <!-- end -->
    <!-- 提交 -->
    <div
      @click="submitPush"
      :loading="btnStatus"
      loading-text="提交中..."
      :disabled="btnStatus"
      class="btn"
    >
      提交意见
    </div>

    <!--退款相关-->
    <van-popup :close-on-click-overlay="false" v-model="refundShow">
      <div class="mc-box">
        <div class="refundHead">联系信息</div>
        <div class="refundTitle">
          您好，为了更好地帮助您处理退款方面的问题，请留下您的联系方式，以便我们尽快联系您并解决问题。
        </div>
        <div class="inputTitle">用户ID</div>
        <input type="text" v-model="userid" disabled class="inputClass" />
        <div class="inputTitle">手机号码<span>*</span></div>
        <input type="text" v-model="phone" class="inputClass" />
        <div class="inputTitle">微信号<span>*</span></div>
        <input type="text" v-model="weChat" class="inputClass" />
        <van-button
          class="btnYes"
          @click="refundBtn"
          :loading="btnStatus"
          loading-text="提交中..."
          :disabled="btnStatus"
          >提交</van-button
        >
        <button @click="refundBtnNo" class="btnNo">取消</button>
        <!-- <div class="refundBottom">
          *以上信息我们仅用于联系用户，将不会收集储存或用于其它用途。
        </div> -->
      </div>
    </van-popup>

    <!--确认弹窗-->
    <van-popup @close="qrbtn" v-model="qrshow" class="popup-qr">
      <div class="refundHead">提交成功</div>
      <div class="qrContent">{{ this.msg }}</div>
      <van-button @click="qrbtn" class="btnYes">确认</van-button>
    </van-popup>
  </div>
</template>

<script>
// start
import * as sdkencryption from "../assets/sdkencryption";
/* WebViewJavascriptBridge框架使用  这段代码是固定的，必须要放到js中*/
function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(WebViewJavascriptBridge);
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
  }
  window.WVJBCallbacks = [callback];
  let WVJBIframe = document.createElement("iframe");
  WVJBIframe.style.display = "none";
  WVJBIframe.src = "https://__bridge_loaded__";
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function() {
    document.documentElement.removeChild(WVJBIframe);
  }, 0);
}
/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
setupWebViewJavascriptBridge(function(bridge) {
  bridge.registerHandler("getImgeUrl", function(data, responseCallback) {
    getImgeUrl(data);
  });
});
import com from "./component.js";
export default {
  data() {
    return {
      btnStatus: false,
      qrshow: false,
      weChat: "",
      phone: "",
      filelist: [],
      fileList: [],
      refundShow: false,
      pictureNum: 0,
      inputText: "",
      message: "",
      iconStatus: 1,
      url: "https://testenv.toponegames.cn/topone-webapi-sdk/h5/",
      language: "",
      userlist: {},
      status: true,
      userid: "",
      msg: "",
      // start
      userlist2: {},
      payStatus: -1,
      showEmailContact: false
      // end
    };
  },
  created() {
    // start
    // 新增：解析url参数并赋值给userlist2
    this.getQueryParams();
    // 判断 language，只要以 zh 开头都显示
    const iszhlang = (this.userlist2.language || "").toLowerCase();
    if (iszhlang.startsWith("zh")) {
      this.showEmailContact = true;
    }
    // end
    window.getImgeUrl = this.getImgeUrl;
    this.userlist = this.$route.query;

    //区分正式测试环境3
    console.log(
      "🚀 ~ file: index.vue:245 ~ this.$route.query.release:",
      this.$route.query.release
    );

    if (this.$route.query.release == 0) {
      this.url = "https://testenv.toponegames.cn/topone-webapi-sdk/h5/";
    } else {
      this.url = "https://ancientcare.yueliangmob.com/app/h5/";
    }

    this.checkCanRefund();

    console.log("🚀 ~ file: index.vue:255 ~ this.url:", this.url);
    //判断语言
    let lang = com.getLanguage(this.$route.query.language);
    this.language = lang;
    this.$i18n.locale = "zh";
    //缓存数据
    if (sessionStorage.getItem("message") !== null) {
      this.message = sessionStorage.getItem("message");
    }
    if (sessionStorage.getItem("iconStatus") !== null) {
      this.iconStatus = Number(sessionStorage.getItem("iconStatus"));
    }
    if (sessionStorage.getItem("inputText") !== null) {
      this.inputText = sessionStorage.getItem("inputText");
    }
    this.fileList = [];
    if (sessionStorage.getItem("fileList1") !== null) {
      this.fileList[0] = { url: sessionStorage.getItem("fileList1") };
      //  this.filelist.push(sessionStorage.getItem('fileList1'))
    }
    if (sessionStorage.getItem("fileList2") !== null) {
      this.fileList[1] = { url: sessionStorage.getItem("fileList2") };
      //this.filelist.push(sessionStorage.getItem('fileList2'))
    }
    if (sessionStorage.getItem("fileList3") !== null) {
      this.fileList[2] = { url: sessionStorage.getItem("fileList3") };
      // this.filelist.push(sessionStorage.getItem('fileList3'))
    }
  },
  mounted() {
    window.flutter_incoming_port = function(action) {
      this.getImgeUrl();
    };
  },
  methods: {
    qrbtn() {
      this.qrshow = false;
    },
    refundBtnNo() {
      this.refundShow = false;
    },
    //t退款信息提交
    refundBtn() {
      console.log(1);
      if (this.phone.length == 0 || this.weChat.length == 0) {
        this.$toast("请填写完整信息");
        return;
      }
      let rg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (rg.test(this.phone) == false) {
        this.$toast("请输入有效的手机号码。");
        return;
      }
      if (this.status == true) {
        this.status = false;
        let userlist = this.userlist;
        let dto = {};
        dto.api = "doFeedbackInfo";
        dto.caller = userlist.appId;
        dto.requestId = com.randomsum();
        dto.time = Date.now();
        userlist.appUserId = userlist.userId;
        userlist.questionStr = "1";
        userlist.feedBackType = 6;
        userlist.weChatMsg = this.weChat;
        userlist.phoneMsg = this.phone;
        userlist.answerStr = this.msg;
        dto.param = userlist;
        this.btnStatus = true;
        this.axios.post(this.url + "doFeedbackInfo", dto).then(res => {
          if (res.status == 200) {
            this.qrshow = true;
            this.refundShow = false;
            this.status = true;
            this.phone = "";
            this.weChat = "";
            userlist.weChatMsg = "";
            this.btnStatus = false;
          } else {
            this.btnStatus = false;
          }
        });
      }
    },
    //提交
    submitPush() {
      this.msg = "";
      if (navigator.onLine) {
      } else {
        this.$toast(this.$t("title18"));
        return;
      }
      if (this.message.length == 0) {
        this.$toast(this.$t("title15"));
        return;
      }
      if (
        this.inputText.indexOf("@") == -1 ||
        this.inputText.indexOf("@") !== this.inputText.lastIndexOf("@") ||
        this.inputText.indexOf("@") == 0 ||
        this.inputText.indexOf("@") == this.inputText.length - 1
      ) {
        this.$toast(this.$t("title13"));
        return;
      }
      if (this.status == true) {
        this.status = false;
        let userlist = this.userlist;
        let dto = {};
        dto.api = "doFeedbackInfo";
        dto.caller = userlist.appId;
        userlist.questionStr = this.message;
        dto.requestId = com.randomsum();
        dto.time = Date.now();
        userlist.phoneMsg = this.inputText;
        userlist.feedBackType =
          this.iconStatus == 1 || this.iconStatus == 2 || this.iconStatus == 3
            ? 1
            : this.iconStatus == 4
            ? 5
            : this.iconStatus == 5
            ? 6
            : 8;
        userlist.appUserId = userlist.userId;
        if (this.fileList.length !== 0) {
          let str = "";
          for (let i = 0; i < this.fileList.length; i++) {
            str = str + this.fileList[i].url;
            if (i !== this.fileList.length - 1) str = str + ",";
          }
          userlist.imgUrl = str;
        }
        dto.param = userlist;
        this.btnStatus = true;
        this.axios.post(this.url + "doFeedbackInfo", dto).then(res => {
          if (res.status == 200) {
            if (
              (this.userlist.language == "zh" ||
                this.userlist.language == "zh-CN") &&
              res.data.data !== null
            ) {
              this.qrshow = true;
              this.msg = res.data.data;
            } else {
              this.$toast(this.$t("title16"));
            }

            this.message = "";
            this.inputText = "";
            this.iconStatus = 1;
            this.fileList = [];
            this.fileLists = [];
            this.btnStatus = false;
          } else {
            this.$toast(this.$t("title17"));
            this.btnStatus = false;
          }
          userlist.imgUrl = "";
          this.status = true;
        });
      }
    },
    //统计字数
    inputchange() {
      if (this.message.length == 300) {
        this.$toast(this.$t("title14"));
      }
    },
    //选择
    // selectIcon(val) {
    //   console.log("val:", val);

    //   this.iconStatus = val;
    //   sessionStorage.setItem("iconStatus", val);
    //   sessionStorage.setItem("message", this.message);
    //   sessionStorage.setItem("inputText", this.inputText);
    //   if (val == 4) {
    //     sessionStorage.removeItem("fileList1");
    //     sessionStorage.removeItem("fileList2");
    //     sessionStorage.removeItem("fileList3");
    //     if (this.fileList.length >= 1)
    //       sessionStorage.setItem("fileList1", this.fileList[0].url);
    //     if (this.fileList.length >= 2)
    //       sessionStorage.setItem("fileList2", this.fileList[1].url);
    //     if (this.fileList.length == 3)
    //       sessionStorage.setItem("fileList3", this.fileList[2].url);
    //     this.$router.push("/dyxg?lang=zh");
    //   }
    //   console.log("执行到这里");

    //   if (val == 5 && this.language == "zh") {
    //     console.log("这是退款入口吗222");

    //     this.weChat = "";
    //     this.phone = "";
    //     let userlist = this.userlist;
    //     let dto = {};
    //     dto.api = "doFeedbackInfo";
    //     dto.caller = userlist.appId;
    //     dto.requestId = com.randomsum();
    //     dto.time = Date.now();
    //     userlist.appUserId = userlist.userId;
    //     dto.param = userlist;
    //     console.log(111111);

    //     //判断用户订单情况
    //     this.axios.post(this.url + "checkValidTransactionId", dto).then(res => {
    //       console.log(22222);
    //       console.log(dto);

    //       if (res.data.data.isAllowRefund == false) {
    //         console.log("允许退款");

    //         this.refundShow = true;
    //         this.userid = this.userlist.userId;
    //         //获取客户账号
    //         this.axios.post(this.url + "getIosFeedbackList", dto).then(res => {
    //           if (res.status == 200) {
    //             this.msg = res.data.data.commitMsg;
    //           }
    //         });
    //       }
    //     });
    //   }
    // },
    selectIcon(val) {
      this.iconStatus = val;
      sessionStorage.setItem("iconStatus", val);
      sessionStorage.setItem("message", this.message);
      sessionStorage.setItem("inputText", this.inputText);
      if (val == 4) {
        sessionStorage.removeItem("fileList1");
        sessionStorage.removeItem("fileList2");
        sessionStorage.removeItem("fileList3");
        if (this.fileList.length >= 1)
          sessionStorage.setItem("fileList1", this.fileList[0].url);
        if (this.fileList.length >= 2)
          sessionStorage.setItem("fileList2", this.fileList[1].url);
        if (this.fileList.length == 3)
          sessionStorage.setItem("fileList3", this.fileList[2].url);
        this.$router.push("/dyxg?lang=zh");
      }
      if (val == 5 && this.language == "zh") {
        this.weChat = "";
        this.phone = "";
        let userlist = this.userlist;
        let dto = {};
        dto.api = "doFeedbackInfo";
        dto.caller = userlist.appId;
        dto.requestId = com.randomsum();
        dto.time = Date.now();
        userlist.appUserId = userlist.userId;
        dto.param = userlist;
        //判断用户订单情况
        this.axios.post(this.url + "checkValidTransactionId", dto).then(res => {
          if (res.data.data.isAllowRefund == true) {
            this.refundShow = true;
            this.userid = this.userlist.userId;
            //获取客户账号
            this.axios.post(this.url + "getIosFeedbackList", dto).then(res => {
              if (res.status == 200) {
                this.msg = res.data.data.commitMsg;
              }
            });
          }
        });
      }
    },
    //预览
    seeimg(index) {
      this.$ImagePreview({
        images: this.filelist,
        startPosition: index,
        closeable: true
      });
    },
    //删除图片
    deleteimg(index) {
      this.fileList.splice(index, 1);
      this.filelist.splice(index, 1);
      sessionStorage.removeItem("fileList" + index);
    },
    uploadImage() {
      if (window.flutter_inappwebview) {
        window.flutter_inappwebview
          .callHandler("uploaderImg")
          .then(function(result) {
            console.log("上传图片回调结果：", result);
            document.getElementById("result").innerHTML =
              "调用上传方法成功，等待选择图片...";
          });
      } else {
        document.getElementById("result").innerHTML =
          "未检测到 flutter_inappwebview 环境";
      }
    },
    //点击上传图片
    clickimge() {
      console.log(this.userlist.appVersion >= 105);

      if (this.userlist.appVersion >= 105) {
        this.uploadImage();

        // window.callHandler("uploaderImg").then(function(result) {
        //   console.log("上传图片回调结果：", result);
        //   document.getElementById("result").innerHTML =
        //     "调用上传方法成功，等待选择图片...";
        // });
      } else {
        uploaderImg.postMessage("");
      }

      //uploaderImg.postMessage("");
      // setupWebViewJavascriptBridge(function (bridge) {
      //   bridge.callHandler(
      //     "uploaderImg",
      //     { uploaderimg: false },
      //     function (response) {}
      //   );
      // });
    },
    //获取图片数据
    getImgeUrl(data) {
      //let data = {url:'http:\/\/user-1259044684.cos.ap-guangzhou.myqcloud.com\/7A94F210-BB83-414F-BBB1-BA872465E482', img:'imageData'}
      this.fileList.push(data);
      this.filelist.push(data.url);

      this.fileList.slice(0, 3);
      this.filelist.slice(0, 3);
    },

    // start
    // 解析 URL 参数为对象
    getQueryParams() {
      let url = window.location.href;
      let str = url.split("?")[1].split("&");
      let obj = {};
      for (let i = 0; i < str.length; i++) {
        let a = str[i].split("=");
        obj[a[0]] = a[1];
      }
      this.userlist2 = obj;
      console.log("userlist2:", JSON.stringify(this.userlist2, null, 2));
    },
    //获取八位随机数
    randomsum8() {
      let str = "";
      let array = [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ];
      for (let i = 0; i < 8; i++) {
        str += array[Math.round(Math.random() * (array.length - 1))];
      }
      return str;
    },
    //获取19位随机数
    randomsum19() {
      let str = "";
      let array = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ];
      for (let i = 0; i < 19; i++) {
        str += array[Math.round(Math.random() * (array.length - 1))];
      }
      return str;
    },
    // 要改
    copyEmail() {
      const email = "Huluhealth@outlook.com";
      if (navigator.clipboard) {
        navigator.clipboard.writeText(email).then(
          () => {
            this.$toast && this.$toast("邮箱已复制");
          },
          () => {
            this.$toast && this.$toast("复制失败，请手动复制");
          }
        );
      } else {
        // 兼容旧浏览器
        const input = document.createElement("input");
        input.value = email;
        document.body.appendChild(input);
        input.select();
        try {
          document.execCommand("copy");
          this.$toast && this.$toast("邮箱已复制");
        } catch (e) {
          this.$toast && this.$toast("复制失败，请手动复制");
        }
        document.body.removeChild(input);
      }
    },

    // 检查函数的调用,要改
    checkCanRefund() {
      let str8 = this.randomsum8();
      let str19 = this.randomsum19();
      let times = Date.now();
      let dto = {
        api: "checkPayStatus",
        caller: this.userlist2.appId,
        param: {
          appId: this.userlist2.appId,
          appUserId: this.userlist2.userId
        },
        requestId: str8,
        time: times,
        traceId: str19
      };
      let dto1 = {
        api: "checkPayStatus",
        caller: this.userlist2.appId,
        param: {
          appId: this.userlist2.appId,
          appUserId: this.userlist2.userId
        },
        requestId: str8,
        time: times,
        traceId: str19
      };

      dto.sign = this.$md5(
        sdkencryption.sdkencryption(dto1, "Hp5G28P6fnopNmK2")
      ).toUpperCase();
      this.axios
        .post(
          // https://ancientcare.yueliangmob.com/app/h5/
          this.url + "checkPayStatus",
          dto
        )
        .then(res => {
          this.payStatus = res.data.data.payStatus;
          console.log("this.payStatus:", this.payStatus);
        });
    }
    // end
  }
};
</script>

<style scoped>
.Box {
  padding-top: 24px;
  overflow-y: scroll;
  width: 100%;
  overflow: hidden;
}

.iconbox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  margin-left: 40px;
  margin-right: 40px;
}
.icon {
  width: 200px;
  height: 180px;
  border-radius: 24px;
  text-align: center;
  color: #474747;
  text-align: center;
  font-family: "Source Han Serif SC";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
  position: relative;
  background-image: url("../static/bor.png");
  background-size: 100% 100%;
}
.icons {
  background-image: none;
}
.icon-img {
  width: 80px;
  height: 80px;
  margin-top: 24px;
}
.icon-title {
  align-content: center;
  height: 48px;
  width: 180px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.icon-mc {
  width: 100%;
  height: 100%;
  background-image: url("../static/Rectangle 42732.png");
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.emailBox {
  width: 670px;
  height: 272px;
  border-radius: 24px;
  border: 2px solid rgba(255, 246, 195, 0.5);
  background: #fffdf6;
  box-shadow: 0px 8px 16px 0px rgba(216, 205, 181, 0.5);
  margin-left: 6px;
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%);
}
.email-title {
  color: #57927c;
  font-family: "Source Han Serif SC";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px; /* 133.333% */
  margin-top: 24px;
  margin-left: 28px;
}
.emailInput {
  width: 558px;
  height: 98px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #fff9e5;
  border: none;
  margin-top: 24px;
  margin-left: 28px;
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 28px 24px;
}
textarea::placeholder {
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: 0.2 !important;
}
textarea::placeholder {
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: 0.2 !important;
}
textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: 0.2 !important;
}
textarea:-moz-placeholder {
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  /* Mozilla Firefox 4 to 18 */
  opacity: 0.2 !important;
}
textarea::-moz-placeholder {
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  /* Mozilla Firefox 19+ */
  opacity: 0.2 !important;
}
textarea:-ms-input-placeholder {
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  /* Internet Explorer 10+ */
  opacity: 0.2 !important;
}
.btn {
  width: 522px;
  height: 120px;
  background-color: transparent;
  background-image: url("../static/btn_green_large.png");
  background-size: 100% 100%;
  border: none;
  margin-top: 32px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 80px;
  color: #fff;
  text-align: center;
  font-family: "Source Han Serif SC";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 90px;
}

.fieldBox {
  margin-top: 8px;
  width: 670px;
  height: 576px;
  border-radius: 24px;
  border: 2px solid rgba(255, 246, 195, 0.5);
  background: #fffdf6;
  box-shadow: 0px 8px 32px 0px rgba(216, 205, 181, 0.5);
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 32px;
}
.pictureBox {
  height: 120px;
  margin-left: 36px;
  width: 614px;
  background-color: transparent;
  margin-top: -4px;
  border: 4px solid #fffdf6;
  z-index: 10px;
  position: absolute;
  bottom: 20px;
}
.imgBox {
  width: 120px;
  height: 120px;
  display: flex;
}
.imgShouw {
  width: 120px;
  height: 120px;
  margin-right: 16px;
  position: relative;
}
.imgAdd {
  width: 120px;
  height: 120px;
}
.imgAdd img {
  width: 120px;
  height: 120px;
}
.imgShouw img {
  width: 120px;
  height: 120px;
}
.imgBoxImg {
  width: 30px !important;
  height: 30px !important;
  position: absolute;
  top: -0px;
  right: -0px;
}

.mc {
  width: 100vw;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: inline-block;
}
.mc-box {
  width: 600px;
  height: 1052px;
  background-image: url("../static/tc.png");
  background-size: 100% 100%;
  color: #5c9a80;
  text-align: center;
  font-family: "Source Han Serif SC";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.refundHead {
  padding-top: 40px;
}
.refundTitle {
  color: #474747;
  font-size: 28px;
  margin-top: 16px;
  margin-left: 40px;
  width: 520px;
  text-align: left;
}
.inputTitle {
  margin-top: 32px;
  margin-left: 40px;
  text-align: left;
  font-size: 28px;
}
.inputClass {
  padding: 20px;
  margin-top: 16px;
  border-radius: 40px;
  width: 480px;
  height: 40px;
  border: none;
  background: #fff9e5;
  color: #474747;
  font-family: "Source Han Serif SC";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.btnYes {
  width: 522px;
  height: 120px;
  background-image: url("../static/btn_green_large.png");
  background-size: 100% 100%;
  border: none;
  margin-top: 40px;
  color: #fff;
  text-align: top;
  font-family: "Source Han Serif SC";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 0px; /* 125% */
}

.btnNo {
  width: 522px;
  height: 96px;
  border-radius: 88px;
  background: rgba(217, 217, 217, 0.3);
  color: #7c7773;
  text-align: center;
  font-family: "Source Han Serif SC";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 125% */
  border: none;
}
.popup-qr {
  width: 600px;
  background-image: url("../static/tc.png");
  background-size: 100% 100%;
  color: #5c9a80;
  text-align: center;
  font-family: "Source Han Serif SC";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 40px;
}
.qrContent {
  margin-top: 20px;
  color: #474747;
  font-family: "Source Han Serif SC";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 520px;
  word-wrap: break-word;
  word-break: break-all;
  margin-left: 40px;
}
</style>

<style>
.van-button__text {
  margin-top: -25px;
}
.van-cell {
  border-radius: 16px;
  background: #fffdf6;
}
.van-field__control {
  width: 614px;
  height: 320px !important;
  border-radius: 16px;
  background: #fff9e5;
  padding: 24px 28px;
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px !important;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.van-popup--center {
  background: #fffdf6;
}
.van-field__word-limit {
  background: #fff9e5;
  color: #474747;
  text-align: right;
  font-family: "Source Han Serif CN";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 595px;
  position: absolute;
  top: 256px;
}
.van-field__control::placeholder {
  color: #474747;
  font-family: "Source Han Serif CN";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: 0.2;
}
.van-toast__text {
  padding: 10px;
  font-family: "Source Han Serif CN";
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 45px;
  text-align: center;
  color: #ffffff;
  flex: none;
  order: 0;
  flex-grow: 0;
  border: 1xp solid yellow;
  word-wrap: break-word;
  word-break: keep-all;
}
.van-toast {
  width: 1950px !important;
}
.van-toast--middle {
  width: 1950px !important;
}
.van-toast--text {
  width: 1950px !important;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 18px;
}
/* start */
/* 邮件地址 */
.email-address-box {
  width: 670px;
  height: 108px;
  border-radius: 24px;
  border: 2px solid #b6d0aa;
  position: relative;
  margin-left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);

  margin-top: 40px;
  padding: 28px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.email-address-tips {
  font-size: 24px;
  color: #b4b3b0;
}
.email-address-nums {
  font-size: 24px;
  color: #57927c;
}
.copy-btn {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url("../static/copyBtn.png");
  background-size: 100% 100%;
}
/* end */
</style>
